<!--
  $Id: grapheditor-gears.html,v 1.5 2011-04-28 15:31:10 gaudenz Exp $
  Copyright (c) 2006-2010, JGraph Ltd

  Graph Editor example for mxGraph. This example demonstrates using
  mxGraph inside an ExtJs panel, and integrating tooltips, popupmenus,
  toolbars and dialogs into mxGraph.
-->
<html>
<head>
    <title>Graph Editor with Gears</title>

 	<link rel="stylesheet" type="text/css" href="http://www.diagramly.com/js/sencha/resources/css/ext-all.css" />
	<!-- <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/xtheme-default.css" /> -->
	<script type="text/javascript" src="http://www.diagramly.com/js/sencha/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="http://www.diagramly.com/js/sencha/ext-all.js"></script>

	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
		mxBasePath = '../../src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="http://mxclient.jgraph.com/demo/mxgraph/src/js/mxclient.php?version=1.7.0.0"></script>

	<script type="text/javascript">
		// Replaces the built-in alert dialog with ExtJs message dialog (can't
		// replace confirm and prompt as they are callback-based and we require
		// a synchronous call with a return value).
		// Ext.MessageBox.prompt('Prompt', message, null, null, null, defaultValue);
		// Ext.MessageBox.confirm('Confirm', message);
		mxUtils.alert = function(message)
		{
			Ext.example.msg(message, '', '');
		};

		function loadGoogleGears()
		{
			// We are already defined. Hooray!
			if (window.google && google.gears)
			{
			  return;
			}

			var factory = null;

			// Firefox
			if (typeof GearsFactory != 'undefined')
			{
			  factory = new GearsFactory();
			}
			else
			{
			  // IE
			  try
			  {
			    factory = new ActiveXObject('Gears.Factory');
			  }
			  catch (e)
			  {
			    // Safari
			    if (navigator.mimeTypes["application/x-googlegears"])
				{
			      factory = document.createElement("object");
			      factory.style.display = "none";
			      factory.width = 0;
			      factory.height = 0;
			      factory.type = "application/x-googlegears";
			      document.documentElement.appendChild(factory);
			    }
			  }
			}

		 	// *Do not* define any objects if Gears is not installed. This mimics the
			// behavior of Gears defining the objects in the future.
			if (!factory)
			{
			  return;
			}

			// Now set up the objects, being careful not to overwrite anything.
			if (!window.google)
			{
			  window.google = {};
			}

			if (!google.gears)
			{
			  google.gears = {factory: factory};
			}
		};

		loadGoogleGears();
	</script>
    <link rel="stylesheet" type="text/css" href="css/grapheditor.css" />
    <script type="text/javascript" src="js/GraphEditor.js"></script>
    <script type="text/javascript" src="js/MainPanel.js"></script>
    <script type="text/javascript" src="js/LibraryPanel.js"></script>
    <script type="text/javascript" src="js/DiagramStore.js"></script>
    <script type="text/javascript" src="js/DiagramPanel.js"></script>

</head>
<body onload="if ((!window.google || !google.gears) && mxUtils.confirm('Google Gears is not installed, install it now?')) { window.location.href='http://gears.google.com/'; } else { main(); }">
<div id="header"><div style="float:right;margin:5px;" class="x-small-editor"></div></div>
</body>
</html>
